import React, { useState, useEffect } from 'react';

function WarningBanner(props) {
  if(!props.warn) {
    return null;
  }

  return (
    <div className='warning'>
      Warning!
    </div>
  )
}

function ListItem({
  value
}) {

  return (
    <div>
      { value }
    </div>
  )
}

function List({
  numbers
}) {
  const listItem = numbers.map((number) => 
      <ListItem key={ number.toString() } value={ number }/>
  )

  return (
    <ul>
      {listItem}
    </ul>
  )
}

export default class Page extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showWarning: true };
  }

  handleToggleClick () {
    this.setState(state => {
      return {
        showWarning: !state.showWarning
      }
    })
  }

  render() {
    
    const numbers = [1, 2, 3, 4, 5];
    return (
      <div>
        <WarningBanner warn = { this.state.showWarning }/>
        <button onClick={ () => this.handleToggleClick() }>
          {this.state.showWarning ? 'Hide' : 'Show'}
        </button>
        <List numbers={ numbers }></List>
      </div>
    )
  }
}
